<template>
    <div class="tobeDone">
        <tableIndex
                :tableData="tableData"
                :tableHead="tableHead"
                :isIndex="true"
                :isSelection="true"
                ref="tableIndexRef"
                :isRadio="false"
                :fields="fields"
                :height="500"
                :page="page"
                @selectChange="selectChange"
                @searchList="searchList"
                @page-change="pageChange"
        >
            <template #right-btn>
                <div style="float: right">
                    <el-button size="small" plain class="button_edit" @click="addHandler"
                    ><svg-icon icon-class="add-icon-1" class="m-r5" />添加</el-button
                    >
                    <el-button
                            size="small"
                            plain
                            class="button_edit"
                            @click="onExport()"
                    ><svg-icon icon-class="export" class="m-r5" />一键导出</el-button
                    >
                </div>
            </template>
            <template #operate>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template #default="{ row }">
                        <el-button
                                v-if="row.status === -1"
                                size="small"
                                class="button_funtion2"
                                @click="issueHandler(row)"
                                type="primary"
                        >下发</el-button
                        >
<!--                        <el-button
                               v-if="row.status === -1"
                                size="small"
                                class="update"
                                @click="updateDialog(row)"
                                type="primary"
                        >编辑</el-button
                        >-->
                        <el-button
                                size="small"
                                class="button_edit"
                                type="primary"
                                @click="updateHandler(row,0)"
                        >查看</el-button
                        >
                        <el-button
                            size="small"
                            class="button_funtion2"
                            type="primary"
                            @click="updateHandler(row,1)"
                        >填写</el-button
                        >
                    </template>
                </el-table-column>
            </template>
        </tableIndex>

        <!-- 查看弹窗 建设部工作周报 -->
        <view-popover ref="viewPopoverRef" @refreshList="getPage"></view-popover>
    </div>
</template>

<script setup>
import TableIndex from '@/components/table/index.vue'
import { weeklyApi } from '@/api/project'
import { useRouter } from 'vue-router'
import { ref, onMounted, reactive } from 'vue'
import ViewPopover from "./components/viewPopover2.vue"
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import {exportExcelFile} from "@/common/utils/GlobalUtils";


const page = reactive({
    page: 1,
    pageSize: 50,
    total: 0
})
const fields = ref([
    {
        key: 'title',
        label: '搜索',
        type: 'input',
        placeholder: '根据周报名称模糊查询'
    },
    {
        key: 'startTime-endTime',
        label: '时间范围查询',
        type: 'datetimerange',
        placeholder: '时间范围查询'
    }
])
let tableData = ref([])
let tableHead = ref([
  {
    prop: 'title',
    label: '名称',
    minWidth: 100
  },
  {
    prop: 'startTime',
    label: '时间范围',
    minWidth: 200,
    formatter: (row) => {
      return row.startTime + ' 至 ' + row.endTime
    }
  },
  {
    prop: 'completeRatio',
    label: '已填写人数/总数',
    minWidth: 150,
  },
  {
    prop: 'deadline',
    label: '截止时间',
    minWidth: 130,
  },
  {
    prop: 'createTime',
    label: '创建时间',
    minWidth: 100,
  },
  {
    prop: 'createUserName',
    label: '创建人',
    minWidth: 100,
  },
  {
    prop: 'status',
    label: '状态',
    formatter: (row) => {
      return row.status == -1 ? '未下发' : '已下发'
    },
    minWidth: 100,
  }
]);
let activeName = ref('0')
const tableIndexRef = ref(null)
//获取列表组件搜索数据
const getSearch = () => {
    return tableIndexRef.value.getSearchData()
}


const onExport = () => {
    weeklyApi.departmentExportList({type:2}).then(res=>{
        if (res) {
            exportExcelFile(res, '部门周报');
        }
    });
}

const selectChange = (e) => {
    console.log(e)
}

//路由跳转
let router = useRouter()

//编辑
const updateHandler = (row,type) => {
    router.push({path: `/investmentProjectManagement/weeklyReport/weeklyDetails/${row.departmentWeeklyId}/${type}`});

}

//删除
const deleteHandler = (row) => {
    ElMessageBox.confirm('是否删除该周报？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            weeklyApi
                .deleteWeekly({departmentWeeklyId:row.departmentWeeklyId})
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功')
                        getPage();
                    }
                })
                .catch(() => {})
        })
        .catch(() => {})
}
// 下发
const issueHandler = (row) => {
    weeklyApi
        .updateWeeklyStatus(row.departmentWeeklyId)
        .then((res) => {
            if (res.code == 200) {
                ElMessage.success('下发成功')
                getPage();
            }
        })
}

const viewPopoverRef = ref(null)
const addHandler = () => {
    viewPopoverRef.value.open({ type: '建设部' ,isAdd:true})
}
const updateDialog = (row) => {
    viewPopoverRef.value.open({ type: '建设部',isAdd:false },row)
}

//搜索接口请求
const searchList = (e) => {
    getPage(e)
}

//分页接口请求
const getPage = (e) => {
    weeklyApi
        .getWeekPageList({
            pageNum: page.page,
            pageSize: page.pageSize,
            param: {
                type:2
            }
        })
        .then((res) => {
            if (res.code == 200) {
                tableData.value = res.data.content
                page.total = res.data.totalSize
                console.log(tableData)
            }
        })
}
//分页
const pageChange = (e) => {
    page.page = e.page
    page.pageSize = e.limit

    getPage(page)
}

onMounted(() => {
    getPage()
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
}
</style>
